<template>
  <div>
    
    <el-scrollbar>
      <el-menu
        default-active="2"
        class="el-menu-vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        :collapse="collapse"
        :unique-opened="true"
      >
        <NavbarItem :menus="menus"></NavbarItem>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import NavbarItem from "../Navbar/NavbarItem";

export default {
  props: {
    menus: {
      type: Array,
      require: true,
    },
    collapse:{
      type:Boolean,
      default:false
    }
  },
  components: {
    NavbarItem,
  },
  methods: {},
};
</script>

<style scoped>
/* 设置菜单栏折叠的动画,需要给 el-aside 元素 添加 width="collapse" 样式配合使用 */
.el-menu-vertical:not(.el-menu--collapse){
  width: 200px;
}
/* 设置 .el-menu 侧栏的高度与取消侧栏与右边容器的间隔 */
.el-menu {
  height: 100vh;
  border-right: none;
}

</style>
